<!-- 滑块 -->
<template>
  <div class="slideitem-wrap">
    <div class="slideitem" @touchstart="inviteItemTouchstart" @touchmove.capture="inviteItemTouchmove"
         @touchend="inviteItemTouchend" :style="slideStyle">
      <div class="slideitem-content">
        <slot></slot>
      </div>
      <div class="slideitem-action" ref="action">
        <slot name="action"></slot>
      </div>
    </div>
  </div>
</template>

<script>
    let translateReg = /translateX\((.*?)px\)/

  export default {
    props: {

    },
    data(){
      return {
          slideStyle: {
              transform: '',
              transition: ''
          }
      }
    },
      mounted(){

      },
    methods: {
        inviteItemTouchstart(e){
            if(this.isMoving){
                return;
            }
            let {changedTouches} = e
            this.inviteItemPageX  = changedTouches[0].pageX
            this.inviteItemPageY  = changedTouches[0].pageY
            if(!this.inviteItemMaxOffset){
                this.inviteItemMaxOffset = -this.$refs.action.offsetWidth
            }
            if(this.slideStyle.transform){
                this.elStartTranslateX =  +(this.slideStyle.transform.match(translateReg)[1])
            }
        },
        inviteItemTouchmove(e){
            let {changedTouches} = e
            let {pageX, pageY} = changedTouches[0]
            let x = pageX - this.inviteItemPageX
            let y = pageY - this.inviteItemPageY
            if(Math.abs(x) < Math.abs(y)){
                return;
            }
            if(this.elStartTranslateX){
                x = x + this.elStartTranslateX
            }
            //console.log(`pageX: ${pageX}, inviteItemPageX: ${this.inviteItemPageX}, x: ${x}`)
            if(x > 0 || x < this.inviteItemMaxOffset){
                return
            }
            this.preMoveX = this.curMoveX || this.inviteItemPageX
            this.curMoveX = pageX
            this.slideStyle.transform = `translateX(${x}px)`
            if(Math.abs(x) > 3){
                e.stopPropagation()
                this.isMoving = true
            }
        },
        inviteItemTouchend(e){
            if(this.isMoving){
                if(this.curMoveX > this.preMoveX){
                    this.inviteCollpse()
                } else {
                    this.inviteExpand()
                }
            }
        },
        inviteExpand(cb){
            this.slideStyle.transition = 'transform .3s'
            this.slideStyle.transform = `translateX(${this.inviteItemMaxOffset}px)`
            setTimeout(()=>{
                this.elStartTranslateX = 0
                this.isMoving = false
                cb && cb.call(this)
            }, 260)
        },
        inviteCollpse(cb){
            this.slideStyle.transform = `translateX(0px)`
            setTimeout(()=>{
                this.elStartTranslateX = 0
                this.isMoving = false
                this.slideStyle.transform = ''
                this.slideStyle.transition = ''
                cb && cb.call(this)
            }, 260)
        },
    }
  }
</script>

<style lang="scss">
  @import "~common/scss/variable";


  .slideitem-wrap {
    overflow: hidden;
  }

  .slideitem {
    display: flex;
  }

  .slideitem-content {
    width: 100%;
    min-width: 100%;
  }

</style>
